import React, { useEffect } from 'react'
import { View, Text, SafeAreaView } from 'react-native'
import { NavigationContainer, useNavigation } from '@react-navigation/native'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import Home from './views/home/Home'
import List from './views/list/List'
import Detail from './views/detail/Detail'

type RootStackParamList = {
  Home: undefined
  List: { item: { [props: string]: any } }
  Detail: undefined
};

const Stack = createNativeStackNavigator<RootStackParamList>()

export default function App() {  
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerStyle: {
            backgroundColor: '#ee742f',
          },
          headerTitleStyle: {
            fontWeight: 'bold',
            color: '#fff'
          },
          headerTintColor: '#fff',
          title: '美食大全',
          // header: () => {
          //   return (
          //     <SafeAreaView
          //       style={{
          //         backgroundColor: '#ee742f'
          //       }}
          //     >
          //       <View
          //         style={{
          //           height:44,
          //           backgroundColor: '#ee742f'
          //         }}
          //       >
          //         <Text>hello</Text>
          //       </View>
          //     </SafeAreaView>
          //   )
          // }
        }}
      >
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="List" component={List} />
        <Stack.Screen name="Detail" component={Detail} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}
